{% extends '::base.html.twig' %}

{% block javascript %}
<script type="text/javascript">
	function validate() {
		//validate passwords to ensure they match
		var password = document.getElementById( "form_password" );
		var confirmPassword = document.getElementById( "confirmPassword" );
		var passwordError = document.getElementById( "passwordInfo" );
		
		if( password.value != confirmPassword.value ) {
			passwordError.innerHTML = "<ul><li>Passwords must match!</li></ul>";
			return false;
		}
	}
</script>

{% endblock %}

{% block body %}
	{{ parent() }}
		<h1>Register</h1>
			<br />
			<p>Already have a ShowStop account? Sign in <a href="{{ path('_login') }}">here</a>.</p> 
			<br />
		<form action="{{ path('_register') }}" method="post" {{ form_enctype(form) }} onSubmit="return validate()">
			<div class="form-row">
				{{form_label( form.username, 'Username: ' ) }}
				{{ form_widget( form.username ) }}
				<div class="field-error">{{ form_errors( form.username ) }}</div>
			</div>
			<div class="form-row">
				{{form_label( form.password.first, 'Password: ' ) }}
				{{ form_widget( form.password.first ) }}
				<div class="field-error">{{ form_errors( form.password ) }}</div>
			</div>
			<div class="form-row">
				{{form_label( form.password.second, 'Confirm Pass.: ' ) }}
				{{ form_widget( form.password.second ) }}
				<div class="field-error"></div>
			</div>
			<div class="form-row">
				{{form_label( form.email, 'Email: ' ) }}
				{{ form_widget( form.email ) }}
				<div class="field-error">{{ form_errors( form.email ) }}</div>
			</div>
			<div class="form-row">
				{{form_label( form.firstname, 'First Name: ' ) }}
				{{ form_widget( form.firstname ) }}
				<div class="field-error">{{ form_errors( form.firstname ) }}</div>
			</div>
			<div class="form-row">
				{{form_label( form.lastname, 'Last Name: ' ) }}
				{{ form_widget( form.lastname ) }}
				<div class="field-error">{{ form_errors( form.lastname ) }}</div>
			</div>
			<div class="form-row">
				{{form_label( form.gender, 'Gender: ' ) }}
				<span id="gender">{{ form_widget( form.gender ) }}</span>
				<div class="field-error">{{ form_errors( form.gender ) }}</div>
			</div>
			<div class="form-row">
				{{form_label( form.birth, 'Birthyear: ' ) }}
				{{ form_widget( form.birth ) }}
				<div class="field-error">{{ form_errors( form.birth ) }}</div>
			</div>
				<br /> 
			<div style="text-align: center">
				<p style="margin-bottom: 20px">By clicking 'I Accept' you hereby accept the ShowStop <a href="#" style="font-style: italic">Agreement and Privacy Statement</a>.</p>
				<input id="acceptButton" class="grey-button" type="submit" value="I Accept" style="padding: 3px" />
			</div>
			
				{{ form_rest(form) }}
		</form>

 {% endblock %}
